import React, {useState} from "react";
import {Button, Checkbox} from "antd";

export default function Column(props) {
    const {list, className} = JSON.parse(JSON.stringify(props))
    const [column, setColumn] = useState(list)
    const [auto, setAuto] = useState(!1)
    return (
        <div className={className + ' u-position u-btn'}>
            <div className="u-btn u-flex" onClick={() => setAuto(!0)}>
                <img src={require('../assets/icon/icon-5.png').default} alt="" />
                <span className="u-m-l-5 u-text-nowrap">自选列</span>
            </div>
            { auto && (
                <div className="table-cell">
                    <div className="table-cell-title main-bg u-flex">
                        <img src={require('../assets/icon/icon-11.png').default} alt="" />
                        <span className="u-m-l-10">自选列</span>
                    </div>
                    { column.map((e, i) => {
                        return (
                            <div className="u-border-top u-p-5" key={i}>
                                <Checkbox value={i} checked={e.checked} onChange={change}>{e.title}</Checkbox>
                            </div>
                        )
                    }) }
                    <div className="table-cell-foot u-flex u-row-around u-p-5">
                        <Button type="primary" size="small" shape="round" ghost onClick={cancel}>取消</Button>
                        <Button type="primary" size="small" shape="round" ghost onClick={save}>保存</Button>
                    </div>
                </div>
            ) }
        </div>
    )

    function change(e){
        let newData = JSON.parse(JSON.stringify(column))
        newData[e.target.value].checked = e.target.checked
        setColumn(newData)
    }
    function cancel(){
        setAuto(!1)
        setColumn(list)
    }
    function save(){
        props.onSave(column)
        setAuto(!1)
    }
}